<template>
	<view class="book-wrapper">
		<view class="head">
			<view class="img">
				<image :src="list.cover" mode=""></image>
			</view>
			<view class="right">
				<view class="top">
					{{list.title}}
				</view>
				<view class="bot">
					<view class="hh">
						￥ {{list.price}} <span>￥{{list.t_price}} </span>| {{list.sub_count}}人
					</view>
				</view>
			</view>
		</view>
		<view class="p"></view>
		<!-- 标签栏 -->
		<u-tabs :list="list2" :scrollable="false" @change="clickTab()"></u-tabs>

		<view class="jianjie" v-show="current == 0">
			<view class="box">
				<view class="top">
					<view class="zi1"> {{list.title}}</view>
				</view>
				<view class="two">
					<view class="left"> {{list.sub_count}} 人学过</view>
				</view>
				<view class="three">
					￥{{list.price}}
					<span>￥{{list.t_price}} </span>
				</view>
			</view>
			<view class="p"></view>
			<view class="content">
				<view class="head">
					电子书简介
				</view>
				<view class="item" v-html="list.try"></view>
			</view>
		</view>

		<view class="mulu" v-show="current == 1">
			<view class="box-item">
				<view class="box">
					共 {{list.book_details.length}} 节
				</view>
			</view>

			<view class="page" v-for="(item,index) in list.book_details" :key="index" @click="tiao(list.id,item)">
				<view class="left">00{{index+1}}</view>
				<view class="right">
					<view class="top">{{item.title}} </view>
					<view :class="item.isfree == 1 ? 'bottom' : ''">
						{{item.isfree == 1 ? "免费试看" : ''}}
					</view>
				</view>
			</view>


		</view>
		<view class="cheng"></view>
		<!-- 底部 -->
		<view class="footer">
			<view class="btn">
				{{list.price=="0.00" ? '立即学习' : "立即订购"+'￥'+list.price}}
			</view>
		</view>


		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		bookdetailList
	} from "../api/book.js"
	export default {
		data() {
			return {
				list: [],
				id: "",
				current: 0,
				list2: [{
					name: '简介',
					id: 1,
				}, {
					name: '目录',
					id: 2,
				}]
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getlist()
		},
		methods: {
			tiao(bookid, item) {
				if (item.isfree == 0) {
					this.$refs.uToast.show({
						type: 'default',
						message: "请购买电子书",
					})
					return
				}
				console.log(bookid, item.id, "111111111111111")
				uni.navigateTo({
					url: `../book/book?book_id=${bookid}&id=${item.id}`
				})
			},
			//获取数据
			async getlist() {
				const res = await bookdetailList({
					id: this.id
				});
				this.list = res.data.data
			},

			clickTab(index) {
				// console.log(index.index, "index")
				this.current = index.index
			},
		}
	}
</script>

<style lang="scss">
	.p {
		height: 15rpx;
		background-color: #f5f5f3;
	}

	.cheng {
		height: 100rpx;
	}

	.book-wrapper {
		width: 100%;
		height: 100%;

		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: white;
			border-top: 1rpx solid #dee2e6;

			.btn {
				width: 90%;
				height: 80%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 30rpx;
				border-radius: 5rpx;
				background-color: #5ccc84;
			}

		}

		.mulu {
			width: 100%;

			.page {
				width: 100%;
				height: 150rpx;
				display: flex;
				align-items: center;
				color: #6c757d;

				.left {
					width: 200rpx;
					height: 100%;
					display: flex;
					justify-content: center;
					font-size: 36rpx;
					align-items: center;
				}

				.right {
					display: flex;
					width: 100%;
					flex-direction: column;
					font-size: 35rpx;

					.bottom {
						color: #dc3545;
						border: 1px solid #dc3545;
						border-radius: 30rpx;
						width: 150rpx;
						height: 45rpx;
						display: flex;
						font-size: 30rpx;
						justify-content: center;
						align-items: center;
						margin-top: 10rpx;
					}
				}
			}

			.box-item {
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 30rpx;

				display: flex;
				justify-content: center;
				align-items: center;

				.box {
					height: 70rpx;
					width: 90%;
					padding-left: 10rpx;
					display: flex;
					border-radius: 5rpx;
					background-color: #f8f9fa;
					border: 1rpx solid #dee2e6;
					align-items: center;
					color: #6c757d;
				}
			}
		}

		.jianjie {
			width: 100%;


			.content {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;

				.head {
					width: 100%;
					height: 70rpx;
					font-size: 35rpx;
					display: flex;
					align-items: center;
				}

				.item {
					padding: 20rpx;
					box-sizing: border-box;
					font-size: 30rpx;
				}
			}

			.box {
				margin-top: 20rpx;
				height: 160rpx;
				background-color: white;
				display: flex;
				flex-direction: column;
				padding: 20rpx;
				box-sizing: border-box;
				justify-content: space-around;

				.top {
					font-size: 38rpx;
				}

				.two {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 30rpx;
					color: #a9a5a0;
				}

				.three {
					color: red;
					font-size: 38rpx;

					span {
						font-size: 25rpx;
						color: grey;
					}
				}

			}
		}

		.head {
			width: 100%;
			height: 350rpx;
			background-color: white;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;

			.img {
				width: 240rpx;
				margin-right: 10rpx;
				height: 100%;

				image {
					height: 100%;
					width: 100%;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.top {
					font-size: 40rpx;
				}

				.bot {
					.hh {
						height: 80rpx;
						width: 400rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 10rpx;
						color: red;
						font-size: 30rpx;

						span {
							color: #a9a5a0;
							font-size: 28rpx;
							margin-left: 10rpx;
							margin-right: 10rpx;
						}

						background-color: rgb(255, 247, 240);
						border: 1px solid rgb(255, 227, 203);
					}
				}
			}
		}
	}

	.u-tabs {
		width: 100%;
		height: 100rpx;
		overflow: hidden;

		.u-tabs__wrapper__nav__item {
			width: 50% !important;
		}
	}
</style>
